Переместить самый левый столбец в адаптивном дизайне

Question

Я работаю над редизайном веб-сайта моей студенческой газеты, чтобы дизайн идеально подходил для iPad. Сейчас я пытаюсь переключить его на одну колонку (для смартфонов).

Проблема в том, что в макете с одним столбцом правый столбец должен находиться над левым столбцом. Я бы знал, как это сделать, если код для правой колонки был написан перед левой колонкой, но, к сожалению, это не так.

Как мне переместить левый столбец под правый столбец? Нужно ли использовать Javascript для переключения порядка столбцов в коде HTML? Спасибо!

РЕДАКТИРОВАТЬ: Я понимаю, что я могу иметь DIV, который невидим, когда ширина> someNumber. Я предпочел бы не быть лишним, хотя ...

Answer 1

Единственное CSS-решение - начать с наименьшего экрана в качестве дизайна по умолчанию, а затем увеличить его по мере увеличения размера экрана с помощью медиазапросов.Начиная с самого маленького экрана, сначала размещайте разметку в правильном порядке - для изображения выше Баннер, Основная навигация, Основное содержимое (правый столбец), В стороне (левый столбец) и (предположительно), Нижний колонтитул.Поскольку медиазапросы применяют дополнительный CSS, вы можете перемещать основное содержимое вправо и влево влево - элементы расположены правильно для экранов меньшего или большего размера.

Answer 2

Я думаю, что проще всего сделать это с помощью jQuery (библиотеки javascript), чтобы удалить содержимое нужного столбца из одного div в другой в DOM.Это позволяет создавать и удалять элементы div на лету, чтобы в конце не было избыточности.

Если это слишком расплывчато, прокомментируйте, и я добавлю пример.

Answer 3

CSS может извлекать элементы из потока документов и размещать их где угодно и любым способом. Но он не может создать новый поток документов (то есть он не может переупорядочивать элементы). Вам нужно расположить один элемент относительно другого или расположить их оба абсолютно.

Если у вас есть доступ к Javascript и вы не беспокоитесь о грациозной деградации, вы также можете поменять местами .innerHTML двух div.