Как я могу переместить выпадающий список под кнопкой «добавить в корзину», используя css?

Question

Я использую плагин для отображения своих продуктов.

Я пытаюсь изменить порядок, в котором выпадающий продукт надстройки и "добавить в корзину"

Если я просто переупорядочиваю div, этого будет достаточно? я все еще начинающий и пытаюсь научиться всему этому.

<form class="cart" action="https://connect.coffee/product/luna/" method="post" enctype="multipart/form-data">

    <div class="wc-pao-addon wc-pao-addon-include-sample wc-pao-required-addon multiple_choice select no-labels">

        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-5659-include-sample-0">
        <select class="wc-pao-addon-field wc-pao-addon-select" name="addon-5659-include-sample-0" required="">

            <option value="">Include Sample</option>

                        <option data-raw-price="" data-price="" data-price-type="flat_fee" value="roasted-1" data-label="Roasted (+$)">Roasted (+$) </option>
                        <option data-raw-price="" data-price="" data-price-type="flat_fee" value="green-2" data-label="Green (+$)">Green (+$) </option>
                        <option data-raw-price="" data-price="" data-price-type="flat_fee" value="no-3" data-label="No">No </option>

        </select>
        </p>

        <div class="clear"></div>
    </div>
    <div id="product-addons-total" data-show-sub-total="0" data-type="simple" data-tax-mode="excl" data-tax-display-mode="excl" data-price="1008.7" data-raw-price="1008.7" data-product-id="5659"></div><div class="add-to-cart-button">
        <div class="quantity">
            <label class="screen-reader-text" for="quantity_5eafc467ac4a6">Luna quantity</label>
            <input type="number" id="quantity_5eafc467ac4a6" class="input-text qty text" step="1" min="1" max="80" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
        </div>

        <button type="submit" name="add-to-cart" value="5659" class="single_add_to_cart_button button alt">Add to order</button>

    </div>

</form>

Answer 1

Можно использовать свойство flexbox CSS в элементе # product-addons-total и изменить порядок дочерних элементов.

#product-addons-total {
    display: flex;
    flex-direction: column-reverse;
}

Запомните префикс поставщика.