Bootstrap to use adaptive placement and weather icon

Today, write a page about the weather, his placement a bit difficult, it took twelve hours to use the bootstrap to place, but it feels a lot of bug

So write down their experiences today, put the code in the future this will know how to write

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="row">
                        <!--<div class="col-md-1 col-lg-1"></div>-->
                        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-3" id="zonghe_tianqi">
                            <div class="media">
                                <div class="media-left" id="zonghe_left">
                                    <a href="#">
                                        <i class="iconfont icon-qing"></i>
                                    </a>
                                </div>
                                <div class="media-body" id="zonghe_body">
                                    <h5 class="media-heading">晴</h5>
                                    <span>38℃</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3" id="zonghe_ledong">
                            <span>>span</Ledong
                        </div>
                    </div>
                </div>

Second is three horizontal and three vertical layout, but also get to know, it is to use three typesetting layout on it

<div class = "COL. 3-XS-SM-COL. 3-COL-MD-2. 3-COL-LG"> 
					<div> 
						<IMG the src = "IMG / zonghe_1.png" class = "IMG-responsive" /> 
					</ div> 
					<div ID = "zonghe_dedtail"> 
						<P> name water: a water </ P> 
						<P> consumption: XXXX </ P> 
						<P> drug consumption: XXXX </ P> 
						<P > abstraction: XXXX </ P> 
						<P> water output: XXXX </ P> 
					</ div> 
					<div> 
						<IMG the src = "IMG / zonghe_2.png" class = "IMG-responsive" /> 
					</ div > 
					<div> 
						<P> equipment: electromagnetic meter </ P> 
						<P> instantaneous flow </ P> 
						<P> pressure: xxxx </ p>
						<p> Water: XXXX </ P> 
						<p> Installation Date: XXXX </ P> 
					</ div> 
				</ div> 
				<div class = "COL-XS-. 6 COL-SM-. 6 COL-MD-. 6 COL -lg-6 "> 
					<div ID = "allmap"> </ div>
					<div the above mentioned id = "allmap_p"> 
						<the p-> 2019 Nian 1 Yue 1 Ri 1 Shi 1 at East Hau Road meter low battery alarm </ the p-> 
						<the p-> 2019 Nian 1 Yue 1 Ri 1 Shi 1 at East Hau Road meter instantaneous ultra-high flow alarm limit </ the p-> 
						<the p-> 2019 Nian 1 Yue 1 Ri Shi 1 1 points east Hau Road meter ultra-low-pressure alarm limit </ the p-> 
						<the p-> 2019 Nian 1 Yue 1 Ri Shi 1 1 points east port Water meter road Alarming </ P> 
						<P> ...... </ P> 
					</ div> 
				</ div> 
				<div class = "COL. 3-XS-SM-COL-COL. 3. 3-MD- LG-2-COL "ID =" zonghe_right "> 
					<div> 
						<P> Account Comparative ranking water </ P> 
					</ div> 
					<div> 
						<IMG the src =" IMG / zonghe_3.png "class =" img- responsive "/> 
					</ div> 
					<div> 
						<the p-> partition leakage charts </ p>
					</ div> 
					<div>  
						<IMG the src = "IMG / zonghe_4.png" class = "IMG-responsive" />
					</ div> 
					<div> 
						<the p-> Pressure ranking charts </ the p-> 
					</ div>
					<div>
						<img src="img/zonghe_5.png" class="img-responsive"/>
					</div>
				</div>