The response arrangement of the picture (here is a four-minute example)
The four-point chart can be broadly divided into:
Category One:
Category two:
The final response effect is:
----------------------------------------
Use bootstrap frame here
----------------------------------------
Direct reference:
1 <Linkrel= "stylesheet"href= "Https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">2 <Scriptsrc= "Https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></Script>3 <Scriptsrc= "Https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></Script>
------------
Category One
The HTML code section is:
<Divclass= "Container"style= "width:400px;"> <Divclass= "Row"> <Divclass= "Col-md-6"style= "border:1px solid red;">Figure A</Div> <Divclass= "Col-md-6"style= "border:1px solid red;">Figure II</Div> </Div> <Divclass= "Row"> <Divclass= "Col-md-6"style= "border:1px solid red;">Might</Div> <Divclass= "Col-md-6"style= "border:1px solid red;">Figure Four</Div> </Div></Div>
:
And
------------
Category II
HTML code section:
1 <Divclass= "Container"style= "width:400px;">2 <Divclass= "Row">3 <Divclass= "Col-md-6"style= "border:1px solid blue;">Figure A</Div>4 <Divclass= "Col-md-6"style= "border:1px solid blue;">Figure II</Div>5 </Div>6 <Divclass= "Row">7 <Divclass= "Col-md-6 col-md-push-6"style= "border:1px solid blue;">Might</Div>8 <Divclass= "Col-md-6 col-md-pull-6"style= "border:1px solid blue;">Figure Four</Div>9 </Div>Ten </Div>
:
And
-----------------------------------------------
All code:
1 <!DOCTYPE HTML>2 <HTMLLang= "ZH-CN">3 <Head>4 <MetaCharSet= "Utf-8">5 <title>Test</title>6 7 <Linkrel= "stylesheet"href= "Https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">8 <Scriptsrc= "Https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></Script>9 <Scriptsrc= "Https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></Script>Ten </Head> One <Body> A - <Divclass= "Container"style= "width:400px;"> - <Divclass= "Row"> the <Divclass= "Col-md-6"style= "border:1px solid red;">Figure A</Div> - <Divclass= "Col-md-6"style= "border:1px solid red;">Figure II</Div> - </Div> - <Divclass= "Row"> + <Divclass= "Col-md-6"style= "border:1px solid red;">Might</Div> - <Divclass= "Col-md-6"style= "border:1px solid red;">Figure Four</Div> + </Div> A </Div> at - <Divclass= "Container"style= "width:400px;"> - <Divclass= "Row"> - <Divclass= "Col-md-6"style= "border:1px solid blue;">Figure A</Div> - <Divclass= "Col-md-6"style= "border:1px solid blue;">Figure II</Div> - </Div> in <Divclass= "Row"> - <Divclass= "Col-md-6 col-md-push-6"style= "border:1px solid blue;">Might</Div> to <Divclass= "Col-md-6 col-md-pull-6"style= "border:1px solid blue;">Figure Four</Div> + </Div> - </Div> the * </Body> $ </HTML>
Picture-responsive arrangement