Почему не работает order (bootstrapv4)?

266
24 октября 2017, 01:22

Почему не работает order bootstrap и блоки остаются в том же положении в каком были изначально?

<div class="row"> 
            <div class="col-md-4  order-md-1"> 
                <div class="media af_spc"> 
                    <img class="align-self-start mr-3" src="img/icon/customize.png" alt="Generic placeholder image"> 
                    <div class="media-body"> 
                        <h5 class="mt-0">Accusan timar</h5> 
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
                    </div> 
                </div> 
                <div class="media af_spc"> 
                    <img class="align-self-start mr-3" src="img/icon/time.png" alt="Generic placeholder image"> 
                    <div class="media-body"> 
                        <h5 class="mt-0">Accusan timar</h5> 
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
                    </div> 
                </div> 
                <div class="media af_spc"> 
                    <img class="align-self-start mr-3" src="img/icon/music.png" alt="Generic placeholder image"> 
                    <div class="media-body"> 
                        <h5 class="mt-0">Accusan timar</h5> 
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
                    </div> 
                </div> 
            </div> 
            <div class="col-md-4 order-md-3"> 
                <img class="img-fluid img-rounded" src="img/phone.png"> 
            </div> 
            <div class="col-md-4  order-md-2"> 
                <div class="media af_spc"> 
                    <img class="align-self-start mr-3" src="img/icon/support.png" alt="Generic placeholder image"> 
                    <div class="media-body"> 
                        <h5 class="mt-0">Accusan timar</h5> 
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
                    </div> 
                </div> 
                <div class="media af_spc_a"> 
                    <img class="align-self-start mr-3" src="img/icon/send.png" alt="Generic placeholder image"> 
                    <div class="media-body"> 
                        <h5 class="mt-0">Accusan timar</h5> 
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
                    </div> 
                </div> 
                <div class="media af_spc"> 
                    <img class="align-self-start mr-3" src="img/icon/camera.png" alt="Generic placeholder image"> 
                    <div class="media-body"> 
                        <h5 class="mt-0">Accusan timar</h5> 
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
                    </div> 
                </div> 
            </div> 
        </div>

Answer 1

Для md экранов все работает верно. Другое дело, если вы хотите, чтобы этот порядок работал на всех ширинах, уберите префикс:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<div class="row"> 
  <div class="col-md-4 order-1"> 
    Порядок-1 Order-1 
    <div class="media af_spc"> 
      <img class="align-self-start mr-3" src="img/icon/customize.png" alt="Generic placeholder image"> 
      <div class="media-body"> 
        <h5 class="mt-0">Accusan timar</h5> 
        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
      </div> 
    </div> 
    <div class="media af_spc"> 
      <img class="align-self-start mr-3" src="img/icon/time.png" alt="Generic placeholder image"> 
      <div class="media-body"> 
        <h5 class="mt-0">Accusan timar</h5> 
        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
      </div> 
    </div> 
    <div class="media af_spc"> 
      <img class="align-self-start mr-3" src="img/icon/music.png" alt="Generic placeholder image"> 
      <div class="media-body"> 
        <h5 class="mt-0">Accusan timar</h5> 
        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
      </div> 
    </div> 
  </div> 
  <div class="col-md-4 order-3"> 
    Порядок-2 Order-3 
    <img class="img-fluid img-rounded" src="img/phone.png"> 
  </div> 
  <div class="col-md-4  order-2"> 
    Порядок-3 Order-2 
    <div class="media af_spc"> 
      <img class="align-self-start mr-3" src="img/icon/support.png" alt="Generic placeholder image"> 
      <div class="media-body"> 
        <h5 class="mt-0">Accusan timar</h5> 
        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
      </div> 
    </div> 
    <div class="media af_spc_a"> 
      <img class="align-self-start mr-3" src="img/icon/send.png" alt="Generic placeholder image"> 
      <div class="media-body"> 
        <h5 class="mt-0">Accusan timar</h5> 
        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
      </div> 
    </div> 
    <div class="media af_spc"> 
      <img class="align-self-start mr-3" src="img/icon/camera.png" alt="Generic placeholder image"> 
      <div class="media-body"> 
        <h5 class="mt-0">Accusan timar</h5> 
        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
margin-top ребенка - сдвигает родителя - почему?
HTML

margin-top ребенка - сдвигает родителя - почему?

Вставляю блок, и даю ему margin-top: 50px - и он сдвигает родителя body в данном случаеПочему так происходит?

 225
Bootstrap3 вложенность container?
HTML

Bootstrap3 вложенность container?

Помогите разобраться с сеткойВнутри container-fluid есть две колонки (col-md-8 и col-md-4)

 229
Как сделать счетчик скачек файла?
HTML

Как сделать счетчик скачек файла?

Мне нужен счетчик скачек файла,который будет передавать информацию о скачках в другой файл с расширением php Есть вот такой код,но он способен...

 267
Надо сделать изгиб полоски в обе стороны при наведении [требует правки]
HTML

Надо сделать изгиб полоски в обе стороны при наведении [требует правки]

Надо чтоб при наведении на полоску она плавно изгибалась вверх, потом вниз - примерно как тутИдея была такая - задать border-radius 100% для hr, дать...

 270