モバイル版とデスクトップ版で異なる順序で要素を配置する方法がわからない

Question

特定のデザインを構築しようとしています。これはデスクトップとモバイル デバイスのデザインです:

リーリー リーリー

これは私がこれまでに開発したコードペンです。これらの要素をどのように配置し、どのようなアプローチをとればよいのかわかりません。

Answer 1

まず、コンテナ要素の最大幅と幅を適切に設定し、(デスクトップのデザインに従って) コンテナ要素が画面の中央に配置されるようにする必要があります。

2 番目に、

.text-container div を画像の上になるように左側に配置します。すでに正しい階層にあるため、z- を設定する必要はありません。 index 画像の上に重ねられます

最後に、ボタンを

.text-container に移動して、テキストと一緒に配置できるようにします

これは CSS の更新されたセクションです:

リーリー リーリー

画像のサイズを変更する場合、リファレンス デザインと同じアスペクト比を維持する必要があることに注意してください。