как поменять местами кнопку и картинку в css не меняя их порядок в разметке html?

Question

картинка и кнопка расположены вертикально. пробовал "order" не получилось

Answer 1

для того чтобы ордер сработал родительский элемент должен быть display: flex или display: inline-flex;

*,
html,
body {
    font-family:"Roboto", sans-serif;
}

.block-item {
    border: 1px solid #ccc;
    display: inline-flex;
}

.block-text.order2 {
    order: 2;
}

<div class="blocks">
    <div class="block-item">
        <p class="block-text">TEXT TEXT TEXT</p>
        <button class="block-btn">button</button>
    </div>
    <div class="block-item">
        <p class="block-text order2">TEXT TEXT TEXT</p>
        <button class="block-btn">button</button>
    </div>
</div>

БЛОГ НА HUSL

как поменять местами кнопку и картинку в css не меняя их порядок в разметке html?

Ответы (1 шт):