Horizontal (columned) Contact form 7 and acceptance field on devices

I want to make columned horizontal form with Contact Form 7, but I stuck with “acceptance” field layout on different devices.

I use this CSS to implement my case:

.one-half,
.one-third,
.one-fourth {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 10px;
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.one-fourth {width: 22%;}

.last {
    margin-right: 0 !important;
    clear: right;
}

@media only screen and (max-width: 1024px) {
.one-fourth {
        width: 100%;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}

/*Horizontal form only*/
.wpcf-wrap {
    min-height: 90px;
}

div.wpcf7-response-output {
    width: 100%;
    clear: both;
    margin: 0;
}

.wpcf-accept > .wpcf7-form-control-wrap {
    display: inline-block !important;
}

and this code on CF7 settings:

<div class="wpcf-wrap">
<div class="one-third">
<label> Your Name (required)
    [text* your-name] </label>
</div>

<div class="one-third">
<label> Your E-mail (required)
    [email* your-email] </label>
</div>
<div class="one-third last">
[submit "Send"]
</div>
<div class="wpcf-accept">
[acceptance acceptance-487] I accept with <a href="https://wordpress.stackexchange.com/">agreement</a> of the personal data processing [/acceptance]
</div>
</div>
[response]

On desktop the result is:

And this on mobile:

But I want to see this:

The question is how to reverse <div class="one-third last"> and <div class="wpcf-accept"> on devices smaller than 767px?

Thanks a lot!

You need a two-third column CSS and a layout like this:

----------------------------------------------
|         .two-third         |  .one-third   |
----------------------------------------------
|  .one-half  |  .one-half   |               |
-----------------------------|    Submit     |
| Name column | Email column |    button     |
-----------------------------|    column     |
|     Acceptance column      |               |
----------------------------------------------

So the CSS rules: (the ... means your code and intact)

.one-half,
.one-third,
.two-third, /* Add this */
.one-fourth {
    ...
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-third { width: 61.32%; }  /* Add this */
.one-fourth {width: 22%;}

...

@media only screen and (max-width: 767px) {
    /* Add the .two-third here, or somewhere else where appropriate based on your
       preferred mobile layout / design. */
    .one-half, .one-third, .two-third {
        ...
    }
}

/*Horizontal form only*/
...

 /* Add this.. */
.wpcf-accept {
  clear: both;
}

...

The HTML part: (re-indented for clarity)

<div class="wpcf-wrap">
  <div class="two-third">
    <div class="one-half">
      <label> Your Name (required)
          [text* your-name] </label>
    </div>

    <div class="one-half last">
      <label> Your E-mail (required)
          [email* your-email] </label>
    </div>

    <div class="wpcf-accept">
      [acceptance acceptance-487] I accept with <a href="https://wordpress.stackexchange.com/">agreement</a> of
      the personal data processing [/acceptance]
    </div>
  </div><!-- .two-third -->

  <div class="one-third last">
    [submit "Send"]
  </div>
</div>
[response]

Try a demo here.