ブートストラップ列の並べ替え

Question

空のdivの列にある有用なリンクを持つブートストラップ列と、12列を占めるlorem ipsumテキストの順序を入れ直そうとしています。 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

プルとプッシュがこれを管理するための良い方法ですが、これはdiv要素を作成しませんleftとright財産を与えるので、これは、同じ行上で動作します新しい行。私が通常使用する解決策（回避策）は、twitter divを2回作成することです。これと同じように：あなたのブロック（linksとtwitter）の

<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. 二つの同じid="content-left"を持っています。それは間違っています。 idは一意である必要があります。

2. linksとcontentを1つの追加ブロックにラップし、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>