Bootstraps: отображение правой колонки в верхней части левой колонки - PullRequest
Новая
       40

Bootstraps: отображение правой колонки в верхней части левой колонки

1 голос
/ 17 апреля 2020

У меня есть две колонки. Рабочий стол: enter image description here

Моб. Телефон:

enter image description here

Это ожидаемое поведение, но я хочу, чтобы столбец слева «Обзор программ» отображался сверху левой колонки, не ниже ее. Я пробовал несколько разных вещей, включая изменение порядка столбцов в HTML и использование «float-left» (что работает, но не является хорошим решением). Я также использовал col-md-pull и col-md-push, но ни один не работает.

Любая помощь высоко ценится! Что бы это ни стоило, я не использую bootstraps 4, и я бы предпочел оставить все как есть.

1 Ответ

2 голосов
/ 17 апреля 2020
  1. Поместите блоки внутри макета в том порядке, в котором они должны go на мобильном телефоне.

    Введение : Bootstrap сначала разрабатывается для мобильных устройств - стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости, используя CSS медиазапросы.

  2. Изменить их порядок. Для этого Bootstrap 3 предоставляет классы типа .col-md-push-9 и .col-md-pull-3, а Bootstrap 4 предоставляет классы заказа .

Демо для Bootstrap 3: https://codepen.io/glebkema/pen/qBONaQd

/* Demo Decorations */
.row-demo > div {
	color: white;
	font: bold 20px sans-serif;
	padding: 9px 15px 30px;
}
.row-demo > div:first-child {
	background: #69c;
}
.row-demo > div:last-child {
	background: #c69;
}
<div class="container">
	<div class="row row-demo">
		<div class="col-md-3 col-md-push-9">Top on mobile / Right on desktop</div>
		<div class="col-md-9 col-md-pull-3">Bottom on mobile / Left on desktop</div>
	</div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

Демонстрация для Bootstrap 4: https://codepen.io/glebkema/pen/GRpZVZq

/* Demo Decorations */
.row-demo > div {
	color: white;
	font: bold 20px sans-serif;
	padding: 9px 15px 30px;
}
.row-demo > div:first-child {
	background: #69c;
}
.row-demo > div:last-child {
	background: #c69;
}
<div class="container">
	<div class="row row-demo">
		<div class="col-md-3 order-md-last">Top on mobile / Right on desktop</div>
		<div class="col-md-9 order-md-first">Bottom on mobile / Left on desktop</div>
	</div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
...