Блог

Главная - Вопросы по программированию - Адаптивный заказ макета с помощью Bootstrap 4

Адаптивный заказ макета с помощью Bootstrap 4

#html #css #twitter-bootstrap #bootstrap-4

Вопрос:

У меня есть страница с таким макетом начальной загрузки:

 <div class="row">
   <div class="col-md-6">
       content
   </div>
   <div class="col-md-6">
       content A
       content B
   </div>
</div>

так что на больших экранах это выглядит так:-

 -----------------------
| content | content A |
|         | content B |
-----------------------

но на экранах меньшего размера это выглядит так:-

 -------------
| content   |
| content A |
| content B |
-------------

Как бы я сделал так, чтобы раздел «контент А» отображался в самом верху на маленьких экранах, например так:-

 -------------
| content A |
| content   |
| content B |
-------------

сохраняя при этом увеличенную версию такой же, как и выше?

Комментарии:

1. Если вы хотите A и B разделитесь, почему они находятся в одном контейнере?

2. Хорошая мысль. И чем больше я играю с этим, тем больше понимаю, что это, должно быть, неправильно. Но как это должно выглядеть?!

3. Я потратил на это некоторое время и не нашел решения. Ваши два макета имеют разные, противоречивые требования. Единственным решением может быть создание сценариев.

4. Да, я пришел к тому же выводу. Я придумаю что-нибудь еще. Спасибо за попытку.

Метки: