Адаптивное выравнивание упаковки

Question

Я хочу добиться следующего эффекта с помощью CSS:

Browser is wide enough to fit text:    | left text             right text |
Browser isn't wide enough to fit text: |    left text    |
                                       |   right text    |

Когда браузер достаточно широк, чтобы вместить текст (без переноса), левый текст выравнивается по левому краю, а правый - по правому. Когда браузер становится меньше ширины левого текста и правого текста (это обычно приводит к переносу текста), я хочу, чтобы правый текст перемещался ниже левого текста, и оба они были центрированы. Это возможно только для медиа-запросов?

Я пытался подать заявку display: table в родительский div, а затем положить display: table-cell на левом и правом текстовых элементах, однако я получил следующее:

| left   right | (text has wrapped on it's own side)
| text    text |

Answer 1

Вы делаете это с помощью медиа-запросов

.left-text {float: left;}
.right-text {float: right;}


/*You set break point according to your requirement*/

@media only screen and (max-width: 768px) {
.left-text {float: none; text-align:center;}
.right-text {float: none;  text-align:center;}
}