BOOTSTRAP: упорядочить порядок панелей разного размера на мобильном телефоне

У меня возникла проблема с тем, как изменить порядок моих панелей на мобильных устройствах. Панели имеют разные размеры. Pls см прикрепить к скриншоту страницы в большом экране (кол-Lg):BOOTSTRAP: упорядочить порядок панелей разного размера на мобильном телефоне

EDIT: Большой формат экрана нормально, так как я не хочу никаких пробелов между строками, так как панели отличаются по высоте.

Когда я его просмотр на мобильном (Col-хзе), я получаю:
первую панель
четвёртой панель
седьмой панель
второй панель
пятые панель
третьей панель
шестых панель

Pls см. Изображение для мобильного экрана:

Я хочу изменить расположение панелей в мобильном (Col-хзе), так что расположение было бы так:
первой панели
второй панели
третьей панель
четвёртой панель
седьмых панели
пятая панель
шестых панель

Pls увидеть фрагмент кода для моих кодов

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
 
\t \t integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
 
\t \t crossorigin="anonymous"> 
 
\t </head> 
 
\t <body> 
 
\t <div class="container"> 
 

 
<!-- 1st panel --> \t \t 
 
\t \t \t <div class="col-lg-4"> 
 
\t \t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t  <h3 class="panel-title">1st</h3> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t  1st panel<br> 
 
\t \t \t \t  1st panel<br> 
 
\t \t \t \t  1st panel 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
<!-- 4th panel --> \t \t 
 
\t \t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t  <h3 class="panel-title">4th</h3> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t 4th panel<br> 
 
\t \t \t \t \t 4th panel<br> 
 
\t \t \t \t \t 4th panel<br> 
 
\t \t \t \t \t 4th panel<br> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> \t \t \t 
 
<!-- 7th panel --> \t \t 
 
\t \t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t  <h3 class="panel-title">7th</h3> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t 7th panel<br> 
 
\t \t \t \t \t 7th panel<br> 
 
\t \t \t \t \t 7th panel<br> 
 
\t \t \t \t \t 7th panel<br> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t 
 
<!-- 2nd panel --> \t \t 
 
\t \t \t <div class="col-lg-4"> 
 
\t \t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t  <h3 class="panel-title">2nd</h3> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t  2nd panel<br> 
 
\t \t \t \t  2nd panel<br> 
 
\t \t \t \t  2nd panel<br> 
 
\t \t \t \t  2nd panel<br> 
 
\t \t \t \t  2nd panel<br> 
 
\t \t \t \t  2nd panel  
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
<!-- 5th panel --> \t \t 
 
\t \t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t  <h3 class="panel-title">5th</h3> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t 5th panel<br> 
 
\t \t \t \t \t 5th panel<br> 
 
\t \t \t \t \t 5th panel<br> 
 
\t \t \t \t \t 5th panel<br> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t 
 
<!-- 3rd panel --> \t \t 
 
\t \t \t <div class="col-lg-4"> 
 
\t \t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t  <h3 class="panel-title">3rd</h3> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t 3rd panel<br> 
 
\t \t \t \t \t 3rd panel<br> 
 
\t \t \t \t \t 3rd panel 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
<!-- 6th panel --> \t \t 
 
\t \t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t  <h3 class="panel-title">6th</h3> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t 6th panel<br> 
 
\t \t \t \t \t 6th panel<br> 
 
\t \t \t \t \t 6th panel<br> 
 
\t \t \t \t \t 6th panel<br> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> \t 
 
\t \t \t \t 
 
\t </div> 
 
\t </body> 
 
</html>

источник

2015-10-28 R. C.

Пожалуйста, следуйте Bootstrap подвесную систему и варианты. Я думаю, используя это, вы можете решить свою проблему.

Link for Grid options

Link for Grid System

Есть предопределенные размеры для устройств. Таким образом, вы можете сделать каждый div и т. Д. Все устройства совместимыми.

источник

2015-10-28 06:56:57 user2584538

Спасибо за ответ моей проблемы. Я уже читал ссылки, и я не думаю, что у них есть ответ на мою проблему, –

Если вам нужны два разных набора устройств на больших устройствах и экстрамастерных устройствах, вам необходимо иметь два разных набора кодов (так как вы меняете порядок «div» в целом, сетка не будет появляться на любую помощь.)

В бутстрапе вы можете тянуть или нажимать столбцы. Но строки не могут перемещаться на основе устройств.

Для спецификации которой вы хотите, что вы можете сделать, это добавить один и тот же код дважды с видимостью filtering-

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
     integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
     crossorigin="anonymous"> 
    </head> 
    <body> 
    <div class="container"> 

<!-- Only for large devices, will be visible only in large devices --> 
<!-- 1st panel -->  
      <div class="col-lg-4 hidden-md hidden-sm hidden-xs"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">1st</h3> 
        </div> 
        <div class="panel-body"> 
        1st panel<br> 
        1st panel<br> 
        1st panel 
        </div> 
       </div> 
<!-- 4th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">4th</h3> 
        </div> 
        <div class="panel-body"> 
        4th panel<br> 
        4th panel<br> 
        4th panel<br> 
        4th panel<br> 
        </div> 
       </div>   
<!-- 7th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">7th</h3> 
        </div> 
        <div class="panel-body"> 
        7th panel<br> 
        7th panel<br> 
        7th panel<br> 
        7th panel<br> 
        </div> 
       </div> 
      </div> 


<!-- 2nd panel -->  
      <div class="col-lg-4 hidden-md hidden-sm hidden-xs"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">2nd</h3> 
        </div> 
        <div class="panel-body"> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel  
        </div> 
       </div> 
<!-- 5th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">5th</h3> 
        </div> 
        <div class="panel-body"> 
        5th panel<br> 
        5th panel<br> 
        5th panel<br> 
        5th panel<br> 
        </div> 
       </div> 
      </div> 

<!-- 3rd panel -->  
      <div class="col-lg-4 hidden-md hidden-sm hidden-xs"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">3rd</h3> 
        </div> 
        <div class="panel-body"> 
        3rd panel<br> 
        3rd panel<br> 
        3rd panel 
        </div> 
       </div> 
<!-- 6th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">6th</h3> 
        </div> 
        <div class="panel-body"> 
        6th panel<br> 
        6th panel<br> 
        6th panel<br> 
        6th panel<br> 
        </div> 
       </div> 
      </div> 

<!-- Only for extra small devices, will be visible only in mobile device --> 


      <div class="col-xs-12 hidden-lg hidden-md hidden-sm">  
<!-- 1st panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">1st</h3> 
        </div> 
        <div class="panel-body"> 
        1st panel<br> 
        1st panel<br> 
        1st panel 
        </div> 
       </div> 
<!-- 4th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">4th</h3> 
        </div> 
        <div class="panel-body"> 
        4th panel<br> 
        4th panel<br> 
        4th panel<br> 
        4th panel<br> 
        </div> 
       </div>   
<!-- 7th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">7th</h3> 
        </div> 
        <div class="panel-body"> 
        7th panel<br> 
        7th panel<br> 
        7th panel<br> 
        7th panel<br> 
        </div> 
       </div> 

<!-- 2nd panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">2nd</h3> 
        </div> 
        <div class="panel-body"> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel  
        </div> 
       </div> 
<!-- 5th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">5th</h3> 
        </div> 
        <div class="panel-body"> 
        5th panel<br> 
        5th panel<br> 
        5th panel<br> 
        5th panel<br> 
        </div> 
       </div> 

<!-- 3rd panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">3rd</h3> 
        </div> 
        <div class="panel-body"> 
        3rd panel<br> 
        3rd panel<br> 
        3rd panel 
        </div> 
       </div> 
<!-- 6th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">6th</h3> 
        </div> 
        <div class="panel-body"> 
        6th panel<br> 
        6th panel<br> 
        6th panel<br> 
        6th panel<br> 
        </div> 
       </div> 
      </div> 

    </div> 
    </body> 
</html>

источник

2015-10-28 07:27:00 A100WebSolutions

Спасибо, что ответили на мой вопрос, я очень ценю это. Я не хочу дважды добавлять один и тот же код для разных устройств, так как время от времени я буду пересматривать содержимое, и я думаю, что это будет трудно сделать в будущем, если я изменю 2 кода. Я также попытался нажать и потянуть, но не повезло. Расположение становится странным. –

Вы можете попробовать некоторые вещи, как это, если она подходит для вашего дизайна

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
     integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
     crossorigin="anonymous"> 
    </head> 
    <body> 
    <div class="container"> 

<!-- 1st panel -->  
<div class="row"> 
      <div class="col-lg-4"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">1st</h3> 
        </div> 
        <div class="panel-body"> 
        1st panel<br> 
        1st panel<br> 
        1st panel 
        </div> 
       </div> 
         </div> 
    <div class="col-lg-4"> 
<!-- 4th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">2nd</h3> 
        </div> 
        <div class="panel-body"> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel<br> 
        2nd panel  
        </div> 
       </div> 
    </div> 
<!-- 7th panel --> <div class="col-lg-4"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">3rd</h3> 
        </div> 
        <div class="panel-body"> 
        3rd panel<br> 
        3rd panel<br> 
        3rd panel<br> 
        3rd panel<br> 
        </div> 
       </div> 
</div> 
      </div> 
<div class="row"> 

       <div class="col-lg-4"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">4th</h3> 
        </div> 
        <div class="panel-body"> 
        4th panel<br> 
        4th panel<br> 
        4th panel 
        </div> 
       </div> 
         </div> 
    <div class="col-lg-4"> 
<!-- 4th panel -->  
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">5th</h3> 
        </div> 
        <div class="panel-body"> 
        5th panel<br> 
        5th panel<br> 
        5th panel<br> 
        5th panel<br> 
        </div> 
       </div> 
    </div> 
<!-- 7th panel --> <div class="col-lg-4"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">6th</h3> 
        </div> 
        <div class="panel-body"> 
        6th panel<br> 
        6th panel<br> 
        6th panel<br> 
        6th panel<br> 
        </div> 
       </div> 
</div> 
</div> 
<div class="row"> 

       <div class="col-lg-4"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">7st</h3> 
        </div> 
        <div class="panel-body"> 
        7th panel<br> 
        7th panel<br> 
        7th panel 
        </div> 
       </div> 


</div> 

     </div>   


</body> 
</html>

источник

2015-10-28 07:27:14 Allen

Спасибо, что ответили на мой вопрос. Я очень ценю это. Я попробовал это, но у меня разные размеры, я не хочу, чтобы между большими рядами на верхних экранах было простое пространство (как и первое вложение в описании). –

Я бы предложил добавить все ваши .panel элементов в .col-md-12 div в порядке убывания. Это даст вам желаемый макет на экранах среднего размера.

Добавление медиа-запрос для больших размеров экранов на умолчанию начальной загрузки col-lg-* точки останова в 1200px с макетом Flexbox и flex-direction набора к row будет заботиться о желаемой компоновке с убывающим порядком слева направо на больших экранах.

Вот пример. Вы также можете проверить can i use flexbox.
Для браузеров, которые не поддерживают flexbox, в Интернете есть множество резервных решений.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'); 
 

 
@media (min-width: 1200px) { 
 
    .lg-flex-row { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
    align-items: flex-start; 
 
    } 
 

 
    .panel { 
 
    flex: 0 1 32%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <!-- 1st panel --> \t \t 
 
    <div class="col-md-12 lg-flex-row"> 
 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">1st</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      1st panel<br /> 
 
      1st panel<br /> 
 
      1st panel 
 
     </div> 
 
     </div> 
 

 
     <!-- 2n panel --> \t \t 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">2nd</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      2nd panel<br /> 
 
      2nd panel<br /> 
 
      2nd panel<br /> 
 
      2nd panel<br /> 
 
      2nd panel<br /> 
 
      2nd panel 
 
     </div> 
 
     </div> 
 

 
     <!-- 3rd panel --> \t \t 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">3rd</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      3rd panel<br /> 
 
      3rd panel<br /> 
 
      3rd panel 
 
     </div> 
 
     </div> 
 

 
     <!-- 4th panel --> \t \t 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">4th</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      4th panel<br /> 
 
      4th panel<br /> 
 
      4th panel<br /> 
 
      4th panel 
 
     </div> 
 
     </div> 
 

 
     <!-- 5th panel --> \t \t 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">5th</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      5th panel<br /> 
 
      5th panel<br /> 
 
      5th panel<br /> 
 
      5th panel 
 
     </div> 
 
     </div> 
 

 
     <!-- 6th panel --> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">6th</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      5th panel<br /> 
 
      5th panel<br /> 
 
      5th panel<br /> 
 
      5th panel 
 
     </div> 
 
     </div> 
 

 
     <!-- 7th panel --> \t \t 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">7th</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      5th panel<br /> 
 
      5th panel<br /> 
 
      5th panel<br /> 
 
      5th panel 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

источник

2015-10-28 12:26:06 DavidDomain

Привет, спасибо, что ответил на мой вопрос. Но для больших экранов мне не нужны пробелы между строками, как и тот, который я прикреплял к первому изображению (например, нет места между 1-й панелью и 4-й панелью) –

BOOTSTRAP: упорядочить порядок панелей разного размера на мобильном телефоне

ответ

Смежные вопросы