表單的No-mobile更改內容列

Question

我正在使用php和bootstrap。

我有兩列，左顯示文本，右顯示一個表格：
現在，當我在桌面上時，我看到兩列。
在手機上，我只想看到表單。

我設法創建了CSS/Bootstrap，以便在移動時看不到左列的內容。現在，我需要幫助來改變表格的位置：它在桌面上時必須保持在右側，而在移動時保持在左側。

UPDATED VERSION: 

<div class="container"> 
<div class="row"> 
    <div class="hidden-xs hidden-sm col-md-6"> 
    <h1 class="title-2 title-3"><span style="font-size: 36px; line-height: 40px;">title </span></h1> 
<ul> 
<li ><b>TEXT1</b></li> 
<li><strong>TEXT2</strong></li> 
<li><strong>TEXT3</strong></li> 
<li><strong>TEXT4</strong></li> 
</ul> 
    </div> 
</div> 
</div> 


<div class="container"> 
<div class="row"> 
    <div class="col-sm-12 col-md-6"> 
    <form> 
    <div class="form-group"> 
     <div class="row"> 
     <div class="col-md-6"> 
     <?php echo $form->getElement("first_name")?> 
     </div> 
     <div class="col-md-6"> 
      <?php echo $form->getElement("last_name")?> 
     </div> 
     </div> 
    </div> 
    <div class="form-group"> 
    <?php if($form->getElement("company")):?> 
    <?php echo $form->getElement("company")?> 
    <?php endif;?> 
    <?php if($form->getElement("company_url")):?> 
     <div class="row"> 
     <?php echo $form->getElement("company_url")?> 
     </div> 
    </div>       
    //more form 
    <div class="row submit"> 
    <?php echo $form->getElement("post_now")?> 
    </div> 
</form>       
</div> 
</div> 
</div> 

---

<div class="no-mobile"> 

<h1 class="title-2 title-3"><span style="font-size: 36px; line-height: 40px;">TITLE </span></h1> 

<ul> 
<li ><b> TEXT 1 </b></li> 
<li><strong> TEXT 2 </strong></li> 
<li><strong> TEXT 3 </strong></li> 
</ul> 
</div> 



<div class="row"> 
<div class="grid_6"> 
     <?php echo $form->getElement("first_name")?> 
</div> 
<div class="grid_6"> 
     <?php echo $form->getElement("last_name")?> 
</div> 
</div> 
     <?php if($form->getElement("company")):?> 
<div class="row"> 
    <?php echo $form->getElement("company")?> 
</div> 
<?php endif;?> 
<?php if($form->getElement("company_url")):?> 
<div class="row"> 
     <?php echo $form->getElement("company_url")?> 
</div> 
<?php endif;?> 
<div class="row"> 
     <?php echo $form->getElement("email")?> 
</div> 
<div class="row"> 
<div class="grid_6"> 
     <?php echo $form->getElement("password")?> 
</div> 
<div class="grid_6"> 
     <?php echo $form->getElement("repeat_password")?> 
</div> 
</div> 
<div class="row submit"> 
     <?php echo $form->getElement("post_now")?> 
</div> 


body{ 
    margin:0; 
    color:#000; 
    font:16px/24px 'Source Sans Pro', Verdana, Geneva, sans-serif; 
    font-weight: 300; 
    background:#fff; 
    -webkit-text-size-adjust:100%; 
    -ms-text-size-adjust:none; 
    min-width:960px; 
} 
.grid_6{ 
float:left; 
margin:0 1% 0 0!important; 
} 

.grid_6{ 
    width:49%; 
} 

.no-mobile{display:none;} 

Answer 1

引導已經提供了一種方法來隱藏在某個斷點列。你不會在網格文檔中看到它，因爲它位於Responsive Utilities。

在左側包含文字的列上使用hidden-xs和hidden-sm類。在右邊的列上使用col-sm-12以使其在小寬度上全屏顯示。 （如果您需要不同的斷點，請使用您需要的任意大小）

您可以通過將其設爲全屏並調整瀏覽器窗口大小來嘗試下面的示例。在較小的寬度上，左列消失，右列佔據空間的其餘部分。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="hidden-xs hidden-sm col-md-6"> 
 
     <p>Your text would go here</p> 
 
    </div> 
 
    <div class="col-sm-12 col-md-6"> 
 
     <p>Your form goes here</p> 
 
    </div> 
 
    </div> 
 
</div>

我不知道你的PHP產生，但我也將建議你用引導的表單類，並沒有投入row div的內容，而無需使用任何col-的類。其結果將是這個樣子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="hidden-xs hidden-sm col-md-6"> 
 

 
     <h1 class="title-2 title-3"><span style="font-size: 36px; line-height: 40px;">TITLE </span></h1> 
 

 
     <ul> 
 
     <li><b> TEXT 1 </b> 
 
     </li> 
 
     <li><strong> TEXT 2 </strong> 
 
     </li> 
 
     <li><strong> TEXT 3 </strong> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-sm-12 col-md-6"> 
 
     <form> 
 
     <div class="form-group"> 
 
      <div class="row"> 
 
      <div class="col-md-6"> 
 
       <?php echo $form->getElement("first_name")?> 
 
      </div> 
 
      <div class="col-md-6"> 
 
       <?php echo $form->getElement("last_name")?> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <?php if($form->getElement("company")):?> 
 
     <div class="form-group"> 
 
      <?php echo $form->getElement("company")?> 
 
     </div> 
 
     <?php endif;?> 
 
     <!-- continue with your form --> 
 
     </form> 
 
    </div> 
 
    </div>