способ отображения 3 блоков внутри другого блока не отображается должным образом в мобильном представлении

Question

Мне нужно иметь 3 div (слева / по центру / справа) внутри другого контейнера div. Мне удалось сделать это с помощью CSS, как показано ниже.

.parent {
  width: 100%;
}

.labelQuestion {
  padding-bottom: 10px;
}

.inline {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  max-width: 99%;
}

.left {
  float: left;
  height: 115px;
  border: 1px solid #000;
}

.right {
  float: right;
  height: 115px;
  border: 1px solid #000;
}

.center {
  float: left;
  height: 115px;
  border: 1px solid #000;
  position: relative;
}

Как видно здесь, крайний правый div указан как второй div. Это работает очень хорошо.

Но в мобильной версии эти 3 блока сложены друг над другом. Таким образом, div, который должен отображаться внизу (СИНИЙ), находится в середине стека. Как показать эти блоки в порядке возрастания в разрешении для мобильных устройств - ГВОЗДЬ, РОЗОВЫЙ, СИНИЙ

Answer 1

я думаю, что float нельзя использовать для этого, вы можете использовать flexbox и заказать

.inline{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}


.right{
  order:3
}

.left{
  order:1
}

.center{
  order:2
}