我必须分段标签。当两者都有空间时，我希望它们并排但是当两者都没有足够的空间时，我希望第二个在第一个下方。
我必须使用哪些 css/flex 框属性？
非常感谢！
编辑：
简单的 HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="section_logo">
<img id="logo" src="images/Logo.gif"/>
</section>
<section id="section_login">
<img id="logo" src="images/Logo.gif"/>
</section>
CSS
body{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
width:100%;
-webkit-box-pack:center; /*Cuando el monitor es mayor al sitio centra el sitio.*/
-webkit-box-orient: vertical;
background-image: url(../images/FondoPantalla.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
#section_logo{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
position: relative;
width:50%;
}
#section_login{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
position: relative;
width:50%;