htmlを編集できないカートシステムでログイン画面の要素の順番を変えたい

前提

レンタルカートシステムのログイン画面で、<section></section>で囲まれた要素の順番を変えたいのですが、htmlの編集はできずcssだけ利用できます。どのようにすれば良いでしょうか。

実現したいこと

section class="__heading"
section class="__input"
section class="__submit"
section class="__menu p-menu-login"
section class="__to-order"

上記の並びを下記に変更したい。

section class="__heading"
section class="__to-order"
section class="__input"
section class="__submit"
section class="__menu p-menu-login"

該当のソースコード

html
1<div class="wrapper wrapper--column-1 wrapper--login wrapper--login-default">
2  <div class="__inner">
3    <div class="main main--login main--login-default" role="main">
4      <section class="__heading">
5        <h1 class="__h1 c-h1"><span>ログイン</span></h1>
6      </section>
7      <form
8        method="POST"
9        action=""
10        accept-charset="UTF-8"
11        class="__form c-form"
12        id="login-form"
13      >
14        <input name="_token" type="hidden" value="" />
15        <section class="__input">
16          <table class="__table p-form-table">
17            <tbody>
18              <tr class="__row-email">
19                <th>
20                  メールアドレス
21                </th>
22                <td>
23                  <input
24                    class="textfield width-l"
25                    name="loginEmail"
26                    type="text"
27                  />
28                </td>
29              </tr>
30              <tr class="__row-password">
31                <th>パスワード</th>
32                <td>
33                  <input
34                    class="textfield width-l"
35                    name="loginPassword"
36                    type="password"
37                    value=""
38                  />
39                </td>
40              </tr>
41            </tbody>
42          </table>
43          <div class="__remember">
44            <label
45              ><input
46                class="__check"
47                name="remember"
48                type="checkbox"
49                value="1"
50              />
51              ログイン状態を保存する</label
52            >
53          </div>
54        </section>
55
56        <section class="__submit">
57          <input
58            name="login"
59            class="__button c-button-submit"
60            type="submit"
61            value="ログイン"
62          />
63        </section>
64      </form>
65      <section class="__menu p-menu-login">
66        <ul>
67          <li class="__item __item--regist">
68            <a href="">新規会員登録</a>
69          </li>
70          <li class="__item __item--password">
71            <a href="">パスワードをお忘れの方</a>
72          </li>
73        </ul>
74      </section>
75      <section class="__to-order">
76        <a href="" class="__link c-button-submit">注文手続きへ</a>
77      </section>
78    </div>
79  </div>
80</div>
81

試したこと

flexboxを使ってorderで順番を変更できるかと思いましたができませんでした。

css
1.wrapper--login .__inner{
2  display: flex;
3  flex-wrap: wrap;
4}
5.wrapper--login .__inner section.__heading {
6  order: 1;
7}
8.wrapper--login .__inner section.__to-order {
9  order: 2;
10}

よろしくお願いします。

行動規範の内容に同意します

回答1件

自己解決

自己解決できました。
やはりFlexboxでorderを使うとできました。
子要素のセレクターの書き方が間違っていたようです。

css
1.wrapper--login .__inner .main--login{
2  display: flex;
3  flex-direction: column;
4}
5
6.wrapper--login .__inner section.__heading {
7  order: 1;
8}
9.wrapper--login .__inner section.p-menu-login {
10  order: 2;
11}
12.wrapper--login .__inner form.__form {
13  order: 3;
14}