Столбец для изменения содержания без мобильного телефона для формы

Question

Я работаю с php и бутстрапом.

У меня есть две колонки, LEFT показывает текст, справа показывает форму:
Прямо сейчас, когда я нахожусь на рабочем столе, я вижу обе колонки.
На мобильном устройстве я хочу видеть только форму.

Мне удалось создать 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

Bootstrap уже предоставляет возможность скрыть столбцы в определенных контрольных точках. Вы бы не видели его в документации по сетке, потому что он находится в 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 генерирует, но я также собираюсь предложить вам использовать форму классов Bootstrap и не ставить содержание в row дивы без использования каких-либо 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>