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

-1

Я хотел бы изменить вертикальный порядок 2 столбцов на странице в мобильном представлении, чтобы столбец 2 пошел первым, а столбец 1 следует.Изменить порядок столбцов в мобильном представлении

Текущий заказ: первый столбец 1 и второй столбец второй, как на мобильном, так и на рабочем столе. В мобильном представлении столбцы располагаются вертикально, поэтому я хочу сохранить их только в другом порядке.

Я попытался использовать float, но что-то в CSS шаблона переопределяет настройки. Вот страница test, и вот HTML.

<body class="theme-invert"> 
    <div class="container"> 
     <div class="row-fluid">   
      <section class="section"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-sm-4 col-sm-offset-1"> 
          <div class="panel panel-default"> 
           <div class="panel-body">   
            <h2>Column 1</h2>           
           </div> 
          </div> 
         </div> 
         <div class="col-sm-6"> 
          <div class="panel panel-default"> 
           <div class="panel-body"> 
            <h2>Column 2</h2>        
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </section> 
     </div> 
    </div>

Edit: это отличается от вопроса, предложенного в комментариях, потому что начинается с колоннами в том же классе, в то время как мои столбцы уже в разных классах, но я до сих пор не в состоянии получить их вести себя по-разному в мобильном режиме.

источник

2015-05-18 Dave

это то, что вы ищете: http://www.w3schools.com/cssref/css3_pr_order.asp – Andrew

возможно дубликат [Bootstrap 3: pull-right только для col-lg] (http://stackoverflow.com/questions/19404861/bootstrap-3-pull-right-for-col-lg-only) –

Это не дубликат, потому что в этом вопросе решение состоит в том, чтобы сделать столбец 1 меньшим классом столбцов (как определено css) Bootstrap. В моем случае столбцы 1 и 2 уже являются разными классами, и я до сих пор не смог заставить его работать. – Dave

Просто дайте col-sm-4 a float:right и начните играть с CSS, пока он не появится.

См this crappy fiddle, где я только что скопировали все ваши вещи и добавил первую строку:

.col-sm-4 {float:right !important}

источник

2015-05-18 10:48:04 Rvervuurt

Привет. Я на самом деле уже пробовал это. Как вы можете видеть, он не переупорядочивает столбцы по вертикали. У Bootstrap уже есть встроенная функция, которая аккуратно кладет столбцы друг на друга в мобильном режиме, мне просто нужно изменить их порядок. – Dave

Вы никогда не говорили, что их нужно было переупорядочить по вертикали ... Пожалуйста, настройте функционирующий JSFiddle (который не выглядит дерьмовым, как мой, где я просто копировал все), чтобы мы могли играть с ним. – Rvervuurt

Спасибо. Я отредактировал вопрос, чтобы уточнить вопрос о вертикальной укладке. Ваша скрипка так же хороша, как я могу это сделать. Я уже избавился от более чем 10 000 строк кода CSS и сохранил только элементы, которые могут содержать что-то, что переопределяет параметры поплавка. Этот код пришел из Bootstrap, и для меня немного сложно устранить неполадки. – Dave

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

ответ

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