Reorder Bootstrap Columns

Question

Попытка изменить порядок колонок начальной загрузки с полезными ссылками в строке с пустым div и текстом lorem ipsum ниже, взяв 12 столбцов. Пробовал использовать clearfix и различные размеры столбцов, но ничего не работает.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

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

 
    <!--Links--> 
 
    <div id="content-left" class="col-xs-10 col-sm-10 col-md-4 col-md-offset-0"> 
 
     <h2>Useful Links</h2> 
 
     <ul> 
 
     <li><a href="#">Link 1 Title</a></li> 
 
     <li><a href="#">Link 2 Title</a></li> 
 
     <li><a href="#">Link 3 Title</a></li> 
 
     <li><a href="#">Link 4 Title</a></li> 
 
     </ul> 
 
    </div> 
 
    <!--Links close--> 
 
    
 
    <div class="clearfix"></div> 
 
    
 
    <!--Content--> 
 
    <div id="content-right" class="col-xs-10 col-sm-10 col-md-12 col-md-push-0"> 
 
     <h2>Content</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> 
 
    </div> 
 
    <!--Content close--> 
 
    
 
    <!--Twitter--> 
 
    <div id="content-left" class="col-xs-10 col-sm-10 col-md-6 col-md-pull-6"> 
 
     <h2>Twitter</h2> 
 
    </div> 
 
    <!--Twitter close--> 
 

 
    </div><!-- row close --> 
 
</div>

Answer 1

тянуть и толкать это хороший способ справиться с этим, но это будет работать только на той же строке, потому что это даст Див left и right свойство, которое не создает новый ряд. Решение (обходное решение), которое я обычно использую, создает твиттер div 2 раза. Как так:

<div class="col-md-6 col-sm-12"> 
    <!-- Links --> 
</div> 
<div class="col-md-6 hidden-sm hidden-xs"> 
    <!-- Twitter --> 
</div> 
<div class="col-sm-12"> 
    <!-- Content --> 
</div> 
<div class="col-sm-12 hidden-md hidden-lg"> 
    <!-- Twitter --> 
</div> 

Answer 2

1. Два из ваших блоков (links и twitter) имеют один и тот же id="content-left". Это не правильно. id должен быть уникальным.

2. Вы можете обернуть links и content в один дополнительный блок и применить отрицательный запас к content.

NB: Это решение работает, если высота twitter блока не больше, чем высота links блока.

Пожалуйста, проверьте результат:

#block-links { background-color: #9fc; } 
 
#block-content { background-color: #ff9; } 
 
#block-twitter { background-color: #fc9; } 
 

 
@media (min-width: 992px) { 
 
    #block-content { 
 
    margin-right: -200%; 
 
    width: 300% !important; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

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

 
    <!-- Additional block --> 
 
    <div class="col-xs-10 col-md-4"> 
 
     <div class="row"> 
 

 
     <!--Links--> 
 
     <div id="block-links" class="col-xs-12"> 
 
      <h2>Useful Links</h2> 
 
      <ul> 
 
      <li><a href="#">Link 1 Title</a></li> 
 
      <li><a href="#">Link 2 Title</a></li> 
 
      <li><a href="#">Link 3 Title</a></li> 
 
      <li><a href="#">Link 4 Title</a></li> 
 
      </ul> 
 
     </div> 
 
     
 
     <!--Content--> 
 
     <div id="block-content" class="col-xs-12"> 
 
      <h2>Content</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
 
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> 
 
     </div> 
 
    
 
     </div> 
 
    </div> 
 
    
 
    <!--Twitter--> 
 
    <div id="block-twitter" class="col-xs-10 col-md-6 col-md-offset-2"> 
 
     <h2>Twitter</h2> 
 
    </div> 
 

 
    </div> 
 
</div>