試圖讓兩列並排

<div class="row"> 
 
    <div class="col-sm-4"> 
 
     <h3 class="heading-h3 p1-h3">Modern Standard</h3> 
 
     <p class="p1"> 
 
     Sometimes copy and pasting some jQuery plugins doesn't cut it. I can help create truly bespoke solutions based on requirements 
 
     </p> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <h3 class="heading-h3 p2-h3">Responsive Design experience</h3> 
 
     <p class="p2"> 
 
     By using bootstrap I ensure most projects work cross device out of the box 
 
     </p> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <h3 class="heading-h3 p3-h3">Available full time</h3> 
 
     <p class="p3"> 
 
     This is my main job, so i'm available 9-5 on phone/email/Skype. 
 
     </p> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <h3 class="heading-h3 p4-h3">Reliable and trusted by clients</h3> 
 
     <p class="p4"> 
 
     Whilst some freelancers go AWOL when the going gets tough, i've worked with few clients for time now 
 
     </p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <h3 class="heading-h3 p5-h3">Built with Scalability</h3> 
 
     <p class="p5"> 
 
     I can help advise the best methodology to ensure your project grows with you. 
 
     </p> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <h3 class="heading-h3 p6-h3">5-star Support</h3> 
 
     <p class="p6"> 
 
     Sometimes building the site is half the work, i'm always around to provide ongoing support. 
 
     </p> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

我一直在試圖讓兩列col-sm-4和col-sm-2並排站在一邊站在一邊。內容和圖標旁邊的小設備使用媒體查詢並使用Bootstrap 4，我只是無法讓它響應。

來源

2017-06-23 stanley oguazu

嘿士丹利，歡迎SO！你很好地將你的代碼轉換成Stack Snippet。但是，它看起來像你忘了添加CSS？此外，你可以刪除相當多的空白，使其更清晰。另外，請嘗試片段編輯器中的「整潔」按鈕。 – domsson

對不起，這是我的第一次，下次會做得更好 –

不需要抱歉;我指出它，所以你可以做得更好*這個時間 - 請注意你問題底部的「編輯」鏈接？您可以按照建議使用它來改進它。 :) – domsson

適合我。使用

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

測試筆的位置：http://amat.me/stackoverflow-44730863

來源

2017-06-23 22:49:35

謝謝，很抱歉，我的問題還不夠清楚，我對這個問題非常沮喪。我想要做的是對媒體查詢進行一些更改。就像將bootstrap 4類添加到列中一樣。例如.. –

。 col-sm-9 {order：flex-start; } ...只是想知道是否可以將flexbox順序添加到媒體查詢中的元素。我可能只是改變我的佈局 –

有彼此相鄰工作列。但是你應該不時地開一個新的行。

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <h3 class="heading-h3 p1-h3">Modern Standard</h3> 
 
    <p class="p1"> 
 
     Sometimes copy and pasting some jQuery plugins doesn't cut it. I can help create truly bespoke solutions based on requirements 
 
    </p> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
    <i class="ion-social-html5"></i> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-sm-2"> 
 
    <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <h3 class="heading-h3 p2-h3">Responsive Design experience</h3> 
 
    <p class="p2"> 
 
     By using bootstrap I ensure most projects work cross device out of the box 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <h3 class="heading-h3 p3-h3">Available full time</h3> 
 
    <p class="p3"> 
 
     This is my main job, so i'm available 9-5 on phone/email/Skype. 
 
    </p> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
    <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
    <i class="ion-social-html5"></i> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <h3 class="heading-h3 p4-h3">Reliable and trusted by clients</h3> 
 
    <p class="p4"> 
 
     Whilst some freelancers go AWOL when the going gets tough, i've worked with few clients for time now 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <h3 class="heading-h3 p5-h3">Built with Scalability</h3> 
 
    <p class="p5"> 
 
     I can help advise the best methodology to ensure your project grows with you. 
 
    </p> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
    <i class="ion-social-html5"></i> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-sm-2"> 
 
    <i class="ion-social-html5"></i> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <h3 class="heading-h3 p6-h3">5-star Support</h3> 
 
    <p class="p6"> 
 
     Sometimes building the site is half the work, i'm always around to provide ongoing support. 
 
    </p> 
 
    </div> 
 
</div>

來源

2017-06-23 23:01:26 Gerard

謝謝你會嘗試 –

試圖讓兩列並排

回答

相關問題