Нужна помощь в изменении порядка ящиков при изменении размера экрана

Я использую Twitter Bootstrap, чтобы создать новый сайт. У меня проблема с отзывчивой стороной к этому.Нужна помощь в изменении порядка ящиков при изменении размера экрана

Вы можете просмотреть свой текущий сайт прямо сейчас:. http://www.monroeorm.com/SNOA/

При изменении размера страницы боковые панели и коробки первичного содержания не в том порядке, они нужны мне, когда я изменить размер страницы, например, на мобильном телефоне, sidebar1 отображается перед основным содержимым. Я пытаюсь отобразить его после содержимого после изменения размера или просмотра на мобильном устройстве.

Вот что у меня до сих пор:

HTML:

<div class="container"> 
<div class="row"> 
<div class="col-md-3"> 
<div class="panel panel-info"> 
       <div class="panel-heading"> 
       <h3 class="panel-title">Sidebar1</h3> 
       </div> 
       <div class="panel-body"> 
       Sidebar1 
       </div> 
      </div> 
</div> 
<div class="col-md-6"> 
<div class="panel panel-primary"> 
       <div class="panel-heading"> 
       <h3 class="panel-title">Primary Content</h3> 
       </div> 
       <div class="panel-body"> 
       Primary Content 
       </div> 
      </div> 
      </div> 

<div class="col-md-3"> 
<div class="panel panel-info"> 
       <div class="panel-heading"> 
       <h3 class="panel-title">Sidebar2</h3> 
       </div> 
       <div class="panel-body"> 
       Sidebar2 
       </div> 
      </div> 
</div> 
</div> 
</div>

CSS: http://www.monroeorm.com/SNOA/css/bootstrap.css

Я, вероятно, сделать это сложнее, чем кажется, - есть ли способ добиться этого?

источник

2013-12-02 JosephLep

возможно дубликат [переключателя объектов на панели Side в CSS] (http://stackoverflow.com/ вопросы/15974264/switch-objects-in-side-panel-in-css) – cimmanon

-1

Вы можете использовать flexbox, а затем добавить медиа-запрос для изменения порядка div, когда ширина браузера является определенным размером.

источник

2013-12-02 22:01:12 APAD1

Не могли бы вы лучше объяснить, как использовать flexbox. На данный момент это спорный ответ. Но примеры описания и кода могут помочь. –

Если они хотят получить более подробное объяснение, они могут использовать ссылку в дублированном вопросе, который предлагает такое же решение. – APAD1

отсутствует "Col-см-12 цв-хз-12" по декларации >>http://leoncio.me/dev/stack/20338694.html

<div class="container"> 
<div class="row"> 

    <div class="col-md-3 col-sm-12 col-xs-12"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Sidebar1</h3> 
     </div> 
     <div class="panel-body"> 
      Sidebar1 
     </div> 
    </div> 
    </div> 

    <div class="col-md-6 col-sm-12 col-xs-12"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Primary Content</h3> 
     </div> 
     <div class="panel-body"> 
      Primary Content 
     </div> 
    </div> 
    </div> 

    <div class="col-md-3 col-sm-12 col-xs-12"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Sidebar2</h3> 
     </div> 
     <div class="panel-body"> 
      Sidebar2 
     </div> 
    </div> 
    </div> 

</div> 
</div>

источник

2013-12-02 22:49:00 leowebguy

Нужна помощь в изменении порядка ящиков при изменении размера экрана

ответ

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