Изменение порядка столбцов на разных экранах - PullRequest
Новая
       14

Изменение порядка столбцов на разных экранах

2 голосов
/ 02 апреля 2019

в основном то, что я пытаюсь достичь с помощью начальной загрузки, это что-то вроде этого (https://ibb.co/mBB9P6P). При изменении размера экрана на меньший (https://ibb.co/0XnDy2S). Конечно, с кодом, который я использую, получается, что второе изображение идет за вторым абзацем

Моя идея заключалась в использовании классов Bootstrap order-first и order-last для достижения этой цели, и пока она работает для мобильных устройств, на рабочем столе обе картинки слева. Я думал, что сработает удаление класса из div по другому медиа-запросу, но я не уверен, что это вообще вариант. 

<div class="row">
        <div class="col-md-3">
          <img src="img1.png">
        </div>
        <div class="col-md-9">
          <p>Text</p>
        </div>
 </div>
<div class="row">
        <div class="col-md-9">
          <p>Text</p>
        </div>
        <div class="col-md-3">
          <img src="img1.png">
        </div>
</div>

Ответы [ 3 ]

2 голосов
/ 02 апреля 2019

Bootstrap делит экран на 12 столбцов сетки. Если вы выберете md-3, вы получите максимум четыре колы. Вы можете указать несколько форматов столбцов все в атрибуте класса. https://getbootstrap.com/docs/4.0/layout/grid/ Надеюсь, это поможет.

1 голос
/ 02 апреля 2019

Если вы используете Bootstrap 4, вы можете воспользоваться его макетом на основе flex и использовать свойство order.Вот пример: 

@media (max-width: 768px) {
  .col-md-9 {
    order: 2;
  }
  .col-md-3 {
    order: 1;
  }
}

img {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-md-3">
    <img src="https://placehold.it/250x150">
  </div>
  <div class="col-md-9">
    <p>Text</p>
  </div>
</div>
<div class="row">
  <div class="col-md-9">
    <p>Text</p>
  </div>
  <div class="col-md-3">
    <img src="https://placehold.it/250x150">
  </div>
</div>

Вот скрипка, с которой можно играть: https://jsfiddle.net/2mwxeor5/1/

0 голосов
/ 02 апреля 2019

Drop Bootstrap (в любом случае это вызовет больше проблем) и используйте flexbox.Заказ недвижимости поможет вам.

...