Адаптивные блоки, при сжатии экрана, блоки меняються местами, как сделать?

Question

[Антон Вебсайтовский]

Здравствуйте.

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

В примере есть медия, то самое разрешения я сделал, когда блок 2 переходит в одну строку. Переходит под 1 блок.

Пример тут:
https://codepen.io/anon/pen/yPJbNN

Answer 1

[Андрей Федоров]

Не понимаю зачем так все усложнять? https://codepen.io/aliencash/pen/gXMRYO?editors=1100

UPD: Хорошо, давайте без flex'ов. https://codepen.io/aliencash/pen/qVNjoz?editors=1100 ))

Comments

[Антон Вебсайтовский]

спасибо, зачем усложнять, чтобы флекс не подключать. он же работает в современных браузерах.

[Антон Вебсайтовский]

Хотелось бы реализовать без флекса.

[Андрей Федоров]

Антон Вебсайтовский, обновил. ))

[Никита Кит]

Антон Вебсайтовский, 97% - мало?
caniuse.com/#search=flexbox

[Антон Вебсайтовский]

Никита Кит, может уже стоит и переходить !

[Антон Вебсайтовский]

Андрей Федоров, ни разу с grid не работал, оно работает и в новы и старых браузерах?

[Никита Кит]

Антон Вебсайтовский, layout grid не flexbox (хоть и есть некоторые схожести) - для них ещё рано. flexbox можно смело применять в прод. 4й бутстрап тому прямое доказательство. blaze_css, foundation, swiper... очень много действительно классных плагинов уже больше года как на флексе. Он гораздо логичнее и проще инлайна и флоутов.

[Антон Вебсайтовский]

Никита Кит, если решения не будет, то выход только флекс ставить.

[Антон Вебсайтовский]

Никита Кит, ссылка не але. там походу вирусы ))

[Никита Кит]

Антон Вебсайтовский, на caniuse вряд ли могут быть вирусы. Открой их главную и пробей flexbox
А лучше чекни в гугле complete guide to flexbox. Очень много статей уже написано о том как и что

[Антон Вебсайтовский]

Никита Кит, спасибо.

Answer 2

[Ankhena]

Оптимальный способ на данный момент:
На флексах: задаете блокам нужный order при соответствующем media

По старинке:
Правый блок размещаете в коде первым. Задаете ему float:right. Левому left.

Comments

[Антон Вебсайтовский]

я так делал, там не все работает, дело в том что, при сжатии, правый блок, уходит сразу под 1 блок, а он не сжимается как щас, попробуйте сами в примере и увидите.

[Ankhena]

Антон Вебсайтовский,

я так делал

Как так? У меня два варианта в ответе.
Каким именно способом вы пользовались и покажите неполучившийся результат?

[Ankhena]

Антон Вебсайтовский, https://jsfiddle.net/e2v8b4e4/ с паддингами и ширинойу ll на маленьком размере только разберитесь.
Меня бесит, когда ширина не по border-box считается.

Но зачем это делать при наличии флекса я не понимаю.

[Антон Вебсайтовский]

Ankhena, спасибо, щас примерю, посмотрим что будет.
а данный метод calc он ведь новый, в каких браузерах пашет.

width: calc(100% - 334px);

[Антон Вебсайтовский]

только вы переделали ! в html, блоки местами ! ll первый шел. по этому у вас и проблема с падингами.
мне щас надо много чего переделывать чтобы все ок работало если менять местами в html.

[Ankhena]

Антон Вебсайтовский,

а данный метод calc он ведь новый, в каких браузерах пашет.

Думаю, вы знаете о сервисе caniuse.com

И я бы использовала (и использую) модель box-sizing: border-box, а не calc.

только вы переделали ! в html, блоки местами !

да, я именно это и написала в ответе, что чтобы они вели себя так, как вам хочется, они в коде должны идти в другом порядке.

мне щас надо много чего переделывать

можно не переделывать, можно просто использовать flex и не парить мозг ;)

[Антон Вебсайтовский]

я уже сделал, все ок, залил на тестовое доменное имя t.arinastar.ru
первый раз слышу об: caniuse.com - долго грузиться и предлагает что-то скачать и перенаправляет на доменные имена.

И я бы использовала (и использую) модель box-sizing: border-box, а не calc.

а почему сделали пример с calc, а не бох. ???

[Ankhena]

caniuse.com - долго грузиться и предлагает что-то скачать и перенаправляет на доменные имена.

эммм.. ну не знаю, что у вас с ним :)

а почему сделали пример с calc, а не бох. ???

Ставлю для всего проекта * {box-sizing: border-box}
Ставить вам *{} не показалось корректным, прописывать для всех - не хватило терпения. Паддинги и ширина не главное в этом вопросе, проще было написать calc

[Антон Вебсайтовский]

Ankhena, понял, надеюсь везде будет calc корректно работать.

Answer 3

[Одиночка Айс]

Блок 1 - дайте float: right;
Блок 2 - дайте float: left;

Comments

[Антон Вебсайтовский]

я так делал, там не все работает, дело в том что, при сжатии, правый блок, уходит сразу под 1 блок, а он не сжимается как щас, попробуйте сами в примере и увидите.

[Одиночка Айс]

Задайте им ширину в 100%, а не фиксированную

[Антон Вебсайтовский]

Одиночка Айс, блокам? и что с этого выйдет. фиксированный только левый, а правый макс и мин есть.

[Одиночка Айс]

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

Answer 4

[art-boy]

Воспользуйтесь Bootstrap-4, довольно просто это реализовать с помощью order-

<div class="container">
    <div class="row">
        <div class="col-6 col-sm-6 col-md">1</div>
        <div class="col-6 col-sm-6 col-md order-md-3">3</div>
        <div class="col col-md-auto order-md-2">logo</div>
    </div>
</div>

Comments

[Антон Вебсайтовский]

зачем, если уже все реализовано, только чуть подправить надо.

[art-boy]

Антон Вебсайтовский, в смысле зачем? Вы спросили - я ответил как это сделать можно. А так что хотите то и подправляйте, сколько угодно