responsive-design - Zurb Foundation でレイアウト内の要素の位置を変更する方法

Question

Zurb Foundation を使用して Web のレイアウトを作成していますが、ブラウザーのサイズを変更するときに問題が発生しました。

これが私のレイアウトです

<div class="row">
    <div class="eight columns">
        <div class="row">
            <div class="twelve columns">
                Company image
            </div>
        </div>
        <div class="row">
            <div class="four columns">
                content1
            </div>
            <div class="four columns">
                content2
            </div>
            <div class="four columns">
                content3
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                content4
            </div>
        </div>
    </div>
    <div class="four columns">
        <div class="row">
            <div class="twelve columns">
                Login
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
    </div>
</div>

タブレット/電話などの場合、ページに 1 つの列のみが表示される場合、次の順序で div が表示されます。

1. 会社イメージ
2. コンテンツ1
3. コンテンツ2
4. コンテンツ3
5. コンテンツ4
6. ログイン
7. ...

次のように、会社の画像のすぐ下にログインが必要です。

1. 会社イメージ
2. ログイン
3. コンテンツ1
4. コンテンツ2
5. ....

どうすればこの動作を取得できますか? 前もって感謝します。

Answer 1

私はこれでそれを達成することができました。後であなたの答えを見ましたが、同じだと思います:

<div class="container">
<div class="row">
    <div class="eight columns">
        <div class="row">
            <div class="twelve columns">
                Company Image
            </div>    
        </div>
        <div class="row hide-for-small">
            <div class="four columns">
                Content1
            </div>
            <div class="four columns">
                Content2
            </div>
            <div class="four columns">
                Content3
            </div>
        </div>
        <div class="row hide-for-small">
            <div class="twelve columns">
                Content4
            </div>
        </div>
    </div>
    <div class="four columns">
        <div class="row pull-four">
            <div class="twelve columns">
                @Html.Partial("_Login")
            </div>
        </div>
        <div class="row show-for-small">
            <div class="four columns">
                Content1
            </div>
            <div class="four columns">
                Content2
            </div>
            <div class="four columns">
                Content3
            </div>
        </div>
        <br />
        <div class="row show-for-small">
            <div class="twelve columns">
                Content4
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
    </div>
</div>

おそらく最もエレガントなソリューションではありませんが、非常にうまく機能します!

最後の文はどういう意味ですか?

Answer 2

行を追加してレイアウトを再設計し、その行に会社の画像とログインのみを 2 列に配置します。その後、以前のコードを貼り付けます。

<div class="row">
<div class="twelve columns">
    <div class="row">
        <div class="eight columns">
                <div class="row">
                    <div class="twelve columns">
                        Company image
                    </div>
                </div>
        </div>
        <div class="four columns">
                <div class="row">
                    <div class="twelve columns">
                        Login
                    </div>
                </div>

        </div> 
    </div>
    <div class="eight columns">
        <div class="row">
            <div class="four columns">
                content1
            </div>
            <div class="four columns">
                content2
            </div>
            <div class="four columns">
                content3
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                content4
            </div>
        </div>
    </div>
    <div class="four columns">
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
    </div>
</div>

Answer 3

この場合、モバイル グリッドリンクを使用してモバイル レイアウトを管理します。このように変更します（この例をより明確にするために背景色を設定します）。

それ以外の場合は、「show-for-small」スタイルと「hide-for-small」スタイルを使用して、2 つの異なるビューを設定できます (固定サイズのモバイル用ですが、コンテンツは冗長になります。

<div class="row">
<div class="twelve columns">
    <div class="row">
        <div class="eight columns " style="background-color:red">
                <div class="row">
                    <div class="twelve columns">
                        Company image
                    </div>
                </div>
        </div>
        <div class="four columns" style="background-color:blue">
                <div class="row">
                <div class="mobile-one"></div>
                    <div class="twelve columns mobile-three" style="background-color:gray">
                        Login
                    </div>
                </div>

        </div> 
    </div>
    <div class="row">
    <div class="eight columns" style="background-color:red">
        <div class="row">
            <div class="four columns">
                content1
            </div>
            <div class="four columns">
                content2
            </div>
            <div class="four columns">
                content3
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                content4
            </div>
        </div>
    </div>
    <div class="four columns" style="background-color:blue">
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
    </div>
    </div>
</div>