Bootstrap разная позиция в разных размерах

237

27 мая 2017, 17:21

Что то не приходит ничего полезного в голову, есть два вида, условно - десктоп и моб версии, необходимо в моб версии перенести красную скнопку под все эелементы:

Текущая разметка:

<div class="row"> 
	<div class="col-sm-5"> 
		<div class="form-group mvf-bajas-required"> 
			<label for="">Tipo de producto</label> 
			<select name="" id="" class="form-control"> 
				<option value="" default>Selecciona</option> 
				<option value="">Selecciona</option> 
				<option value="">Selecciona</option> 
				<option value="">Selecciona</option> 
				<option value="">Selecciona</option> 
			</select> 
		</div> 
		<div class="form-group"> 
			<a href="#" class="btn btn-primary">Anadir</a> 
		</div> 
	</div> 
	<div class="col-sm-7"> 
		<div class="row"> 
		   <div class="col-sm-4"> 
			   <div class="form-group mvf-bajas-required"> 
				   <label for="">Numero</label> 
				   <input id="" name="" type="text" class="form-control" placeholder="677 761 768"> 
			   </div> 
		   </div> 
		   <div class="col-sm-8"> 
			   <label>Marca los productos que deseas dar de baja:</label> 
			   <div class="mvf-bajas-checkbox-group"> 
				   <input id="checkbox1" name="" type="checkbox"> 
				   <label for="checkbox1">Television Linea 56</label> 
			   </div> 
		   </div> 
		</div> 
		<div class="row"> 
			<div class="col-sm-4"> 
				<div class="form-group mvf-bajas-required"> 
					<label for="">Numero</label> 
					<input id="" name="" type="text" class="form-control" placeholder="677 761 768"> 
				</div> 
			</div> 
			<div class="col-sm-8"> 
				<div class="mvf-bajas-checkbox-group"> 
					<input id="checkbox2" name="" type="checkbox"> 
					<label for="checkbox2">Television Linea 58</label> 
				</div> 
			</div> 
		</div> 
		<div class="row"> 
			<div class="col-sm-4"> 
				<div class="form-group mvf-bajas-required"> 
					<label for="">Numero</label> 
					<input id="" name="" type="text" class="form-control" placeholder="677 761 768"> 
				</div> 
			</div> 
			<div class="col-sm-8"> 
				<div class="mvf-bajas-checkbox-group"> 
					<input id="checkbox3" name="" type="checkbox"> 
					<label for="checkbox3">Television Linea 22</label> 
				</div> 
			</div> 
		</div> 
	</div> 
</div> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ничего кроме как сделать еще одну кнопку и одну скрывать в моб, другую в десктопе, в голову не лезет.

Любые светлые мысли?

Answer 1

Можно добавить среднему блоку правый флоат на экранах шириной от 768 пикселей. У двух других блоков останется левый флоат, и они окажутся друг под другом.

/* суть дела */ 
@media (min-width: 768px) { 
  .pull-sm-right {  
    float: right !important; 
  } 
} 
 
/* для красоты */ 
.decorations > div { 
  color: #fff; 
  font-size: 28px; 
  font-weight: bold; 
  padding-top: 6px;  
} 
.decorations > div:nth-of-type(1) { background: #9c6; min-height:  80px; } 
.decorations > div:nth-of-type(2) { background: #69c; min-height: 200px; } 
.decorations > div:nth-of-type(3) { background: #f33; min-height:  80px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container"> 
  <div class="row decorations"> 
    <div class="col-sm-5">Поле со списком</div> 
    <div class="col-sm-7 pull-sm-right">Много полей</div> 
    <div class="col-sm-5">Кнопка</div> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как узнать корректный event.layerX div'а с css анимацией scroll?

Добрый день!

262

CSS

Кнопка перключения стилей

Подскажите как на JavaScript сделать скрипт чтоб он менял стиль страницы с ночного на дневнойС HTML и CSS я справился, а вот кнопку переключения стилей...

646

CSS

Вопрос по CSS lightbox2

Как сделать в lightbox2 крестик закрытия сверху ? http://lokeshdhakarcom/projects/lightbox2/

260

CSS

Как сделать свечение вокруг SVG иконки?

678