Question 165928 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can two divs be reversed & placed on one line in WordPress?

I need to put two buttons in one line reversely.
I tried following code, but no changes, they are still in two lines.
Would you please let me know how to solve this?

enter image description here => enter image description here

Existing code:

<form class="acf-fields">
<div class="1"></div>
<div class="2"></div>
<div class="custom-warp-button">
    <div class="acf-form-submit">
        <div class="acfef-submit-buttons">
            <input type="submit" class="acfef-submit-button"  value="Sbumit">
        </div>
    </div>
    <div class="save-progress-buttons">
        <input formnovalidate="" type="submit" class="save-progress-button" value="Save Draft" name="save_progress">
    </div>
</div>
</form>

Code I trid:

.acf-fields div.custom-warp-button  {
display: flex!important;
flex-direction: row-reverse!important;
}

Thank you.

Tags:

2

Answers


  1. 0

    Change CSS

    .acf-fields div.custom-warp-button  {
  display: flex!important;
}
.acf-fields div.custom-warp-button .acf-form-submit{
  order:2;
}

    https://jsfiddle.net/lalji1051/xz0dcfn9/4/

    Login or Signup to reply.
  2. 0

    They shown in one line for me:

    .acf-fields div.custom-warp-button  {
display: flex!important;
flex-direction: row-reverse!important;
}
    <form class="acf-fields">
<div class="1"></div>
<div class="2"></div>
<div class="custom-warp-button">
    <div class="acf-form-submit">
        <div class="acfef-submit-buttons">
            <input type="submit" class="acfef-submit-button"  value="Sbumit">
        </div>
    </div>
    <div class="save-progress-buttons">
        <input formnovalidate="" type="submit" class="save-progress-button" value="Save Draft" name="save_progress">
    </div>
</div>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search