Css - три столбца, одинакового размера на больших устройствах, центральный элемент для перехода вверх и два других ниже на меньших устройствах

Есть три столбца:

b  a  c
|  |  |

в больших устройствах.

Я хочу показать им:

  a
  |
b   c
|   |

на небольших устройствах.

Мой код:

<div class = "col-xs-12 col-sm-4">
    b
</div>
<div class = "col-xs-12 col-sm-4">
    a
</div>
<div class = "col-xs-12 col-sm-4">
    c
</div>

и моя попытка состояла в том, чтобы изменить положение второго div, который является a и первого div, с помощью jquery, а затем оставить a без изменений, а b иметь col-xs-8 col-sm-4, а для c - col-xs-4 col-sm-4.

Это стандартный способ сделать это ?!

Ожидается, что вы, по крайней мере, попытаетесь кодировать это для себя. Stack Overflow - это не сервис для написания кода. Я бы посоветовал вам сделать дополнительное исследование либо через Google, либо путем поиска SO, попробовать и. если у вас все еще есть проблемы, вернитесь с ваш код и объясните, что вы пробовали.

— 26.04.2018 16:25

css twitter-bootstrap-3 multiple-columns

26.04.2018 16:21

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 2

Что-то вроде этого. Пожалуйста, проверьте https://getbootstrap.com/docs/4.0/layout/grid/, это действительно хорошая документация.

<div class = "row">
  <div class = "col-sm-4">
  </div>
  <div class = "col-sm-4">
    <div class = "row">
      <div class = "col-sm-12"></div>
      <div class = "col-sm-6"></div>
      <div class = "col-sm-6"></div>
  </div>
  <div class = "col-sm-4">
  </div>
</div>

26.04.2018 16:25

Я сделал это сам:

<div class = "hidden-sm hidden-md hidden-lg col-xs-12">
a //so it shows only on small devices
</div>
<div class = "col-xs-8 col-sm-4">
b
</div>
<div class = "hidden-xs col-sm-4">
a //so it shows only on large devices
</div>
<div class = "col-xs-4">
c
</div>

Спасибо всем, даже тем, кто проголосовал против :)

26.04.2018 17:25