重新排列在引導

中/小型設備之間的行

Medium Device 
+----------+---------------------+ 
| Image | WordA WordA WordA | 
|   +---------------------+ 
|   | Links Links Links | 
|   +---------------------+ 
|   | WordB WordB WordB | 
+----------+---------------------+

基於上述佈局，如何推動在小設備「鏈接/ WordB」地區從新行開始，或者將Links/WordB右移到圖像的下方，並在WordA的下面放置中等設備。

Small Device 
+------------+---------------+ 
| Image  | WordA WordA | 
|   | WordA   | 
+----------------------------+ 
| Links Links Links   | 
+----------------------------+ 
| WordB WordB WordB   | 
+----------------------------+

我MediumDevice例子看起來如下

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="Pragma" content="no-cache"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 

    <style> 
     div 
     { 
      border:solid 1px; 
     } 
     .big-box 
     { 
      background-color: #10BCFF; 
      color: white; 
      text-align: center; 
      margin: 2px; 
      font-size: 1.5em; 
      height: 100px; 
     } 
    </style> 
</head> 

<body> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div class="big-box">image</div> 
      </div> 
      <div class="col-md-8"> 
       <div class="row"> 
        WordA WordA WordA 
       </div> 
       <div class="row"> 
        Links Links Links 
       </div> 
       <div class="row"> 
        WordB WordB WordB 
       </div> 
      </div> 
     </div> 
    </div> 

</body> 
</html>

感謝您的幫助桑托斯

來源

2017-10-11 Santo

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6"> 
      Image 
     </div> 
     <div class="col-xs-6"> 
      <div class="row"> 
       WordA WordA WordA 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"> 
      WordA WordA WordA 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"> 
      Links Links Links 
     </div> 
    </div> 
</div>

還要注意的是：

的引導網格系統有四個班：xs（電話），sm（表格ts）， md（臺式機）和lg（大型臺式機）。這些類可以結合來創建更加動態和靈活的佈局。

源：https://www.w3schools.com/Bootstrap/bootstrap_grid_examples.asp

來源

2017-10-11 13:41:34

您好，該解決方案將只顯示佈局作爲圖片爲「X-小型設備+」，但它不會再 - 「中等設備」所要求的格式，其中div（WordA/Links/WordB）落在右側並堆疊起來。或者我錯過了什麼？ – Santo

設法解決如下

<style> 
    .big-box { 
     background-color: #10BCFF; 
     color: white; 
     text-align: center; 

     font-size: 1.5em; 
     height: 100px; 
    } 
</style> 
<div class="container"> 
    <div class="row"> 
      <div class="big-box col-md-4 col-sm-6">image</div> 
      <div class="col-md-8 col-sm-6"> WordA WordA WordA</div> 
      <div class="col-md-8 col-sm-12">Links Links Links</div> 
      <div class="col-md-8 col-sm-12">WordB WordB WordB</div> 
    </div> 
</div>

來源

2017-10-11 16:41:50 Santo

重新排列在引導

回答

相關問題