表单的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>