Bymas | адаптация

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

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

мне даже адаптивная разметка легче идет чем разметка <float>

обьесните плиз

Изображение

------

78389_Lwybpg_EPP0.jpg (415.8 Kb)
Скачиваний: 133

Float - это ересь...
Display: flex.
Вся суть адаптивного диза - это указания ширины в процентах и скрытие или показание элементов исходя из ширины экрана
________
посл. ред. 01.08.2021 в 01:17; всего 2 раз(а); by jasis

jasis , я понял что ширину опредиляет @media { макс ширина}
и так далее.

я пробовал, но у мення все блоки встают в перемешку ((((

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

jasis , ну у меня вот разметка, пример

css

   .clearfix:after {     content: "";     display:block;     clear: both; }  html, body {     height: 100%;     margin: 0;     padding: 0;     font-family: Arial,sans-serif;     font-size: 14px;     line-height: 1.4;     color: #333;     background-color: #fff; }  .header, .content-wrapper, .container, .content, .footer {     display: -webkit-flex;     display: -moz-flex;     display: -ms-flex;     display: -o-flex;     display: flex;     flex-direction: row; }  .header {     height: 200px;     background: #6CAEDD;     color: #fff;     -webkit-box-flex: 0;     -webkit-flex: none;     -ms-flex: none;     flex: none; }  .footer {     height: 150px;     background: #364850;     color: #fff;     -webkit-box-flex: 0;     -webkit-flex: none;     -ms-flex: none;     flex: none; }  .content-wrapper {     margin: 0 auto;     flex-direction: column;     height: 100%;     width: 2000px; }  .container {     flex-wrap: nowrap;     flex: 1 0 auto; }  .content {     width: 100%;     flex-direction: column;     flex: 1 1 auto;     order: 0;     order: 1; }  .sidebar {     background: #FFD399;     flex: 0 0 auto; }  .sidebar1 {     width: 300px;     order: 1;     order: 0; }  .sidebar2 {     width: 300px;     order: 2;     order: 2; }

Simptom333 (01.08.2021 в 02:53)
155876556 , Разметку проверь. Может там накосячил.

пример в низу

Помогите пацану,. Я Тоже гляну как это делается

У тебя сайд бары с фиксированной шириной. А должно быть если фикс , то скрывать их на замену другие показывать, либо эти в процентах писать..
Я вообще начинал с bootstrap

jasis , бутстрапом, я чёт ничего не понял там , что какой тег отвечает, мне легче самому писать,
Я через бутстрап как бы пробовал , тоже не помогло

652591566 , не понял потому что не хотел.