私は現在、このレイアウトをHTML/CSSを使って模倣しようとしています。添付されているのは、デスクトップとモバイルの外観です。モバイルの場合、私は100％確実なアプローチではありません。画像が「Bowers & Wilkins」の前にどのように来るのか注目してください。どのように私はこのレイアウトを模倣することができます
レイアウトは100％ブラウザの幅btwです。私の最初の考えはこれにフレックスボックスを使用することでした...しかし、それが正しいアプローチであれば100％確実ではありません。私は現在フレックスボックスを使用することにかなり新しいです。効果的にモバイルRES -
最も簡単な方法は、おそらくあなたは、以下のスニペットを実行すると、最初はデモでは、単一の列に示されているデスクトップの解像度の右（に画像をフロートするだろう。あなたがフルページモードに切り替えると、画像が右に浮かぶので、あなたは）要素の順序の変更が表示されます。
body {
font-family: Arial, sans-serif;
background-color: #aaa;
padding: 1em;
font-size: 14px;
}
h1,
h2,
p {
margin: 0;
color: #fff;
}
/* float image to the right, half the width of the viewport */
img {
float: right;
margin-left: 1em;
width: 50vw;
}
h1 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
text-transform: uppercase;
font-size: 1em;
}
@media only screen and (max-width: 767px) {
/* at mobile res, remove the float so the image appears back between the headings */
img {
float: none;
margin-left: 0;
margin-bottom: .75em;
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
<h1>Exclusive offers from our partners</h1>
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
<h2>Bowers & Wilkins</h2>
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>私は確かにこのための良い解決策としてブートストラップをお勧めします。彼らは、自動的にこのようにオブジェクトをプル＆プッシュおよび再配置できるCSSクラスをあらかじめ構築しています。
ここでのクラスは、クラス= "COL-MD-6 COL-MD-プッシュ-6" とクラス= "COL-MD-6 COL-MD-プル6"
だろうあなたは、HTMLを表示することができますあなたのブラウザーでcssを使って、彼らがどのようにこれを行うのかを正確に見てください。 – Nath
この場合、これはPhotoshopで作成した画像です。 – Karth
あなたはレスポンシブなデザインに目を向けたいと思っています。あなたの最も小さいスクリーンで最初にそれを作ることから始めます。私には、コンテナを考慮して、コンテナ内に3つのセクションまたはdivがあるはずです。 1つは独占注文用、1つはimg用、もう1つはテキスト用です。次に、メディアクエリを使用してCSS内でレイアウトを反転させます。イメージを使用したいだけなら、あなたはただ一つでこれを行うことができ、異なったスクリーンサイズのためにcssでimgを変えることができます。 – DCR