0
화면의 크기에 따라 다른 순서로 열을 표시하려고합니다.Bootstrap4 베타의 열 순서가 잘못되었습니다
1) MD 이상인 경우 S, M, L, XL을 단일 행 (3 열/행)으로 표시합니다. 1) sm 이하의 경우 행당 2 열을 표시하고 싶습니다. XL, L부터 시작하여 한 줄에 M, 다음에 M, S로 시작하여 콘텐츠를 다시 주문하려고합니다.
- XL | L - 2x2 표를 표시하려고 총알을 무시하십시오.
- M | S
다음은 제 코드이지만 올바르게 작동하지 않습니다.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta-name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<title>My Photo</title>
<style> <!-- debug border -->
.my-border {
border:solid;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row"> <!-- irrelevant for this problem -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 my-border">
<div class="alert alert-success">
Hello World
</div>
</div>
</div>
<div class="row">
<!-- I suppose, for xs and sm, I'll get 2 cols (col-xs-6), for md or larger, I'll get 4 cols (col-md-3). order-xs-6 will move this column to col 6 and order-md-1 will keep it in column 1 -->
<div class="col-xs-6 col-md-3 order-xs-6 order-md-1 my-border">
<div class="row">
<div class="col-md-12"><h5>Small</h5></div>
</div>
<div class="row"> <!-- nesting irrelevant for this problem -->
<div class="col-md-4">sm1</div>
<div class="col-md-4">sm2</div>
<div class="col-md-4">sm3</div>
</div>
</div>
<div class="col-xs-6 col-md-3 order-xs-1 order-md-3 my-border">
<div class="row">
<div class="col-md-12"><h5>Medium</h5></div>
</div>
<div class="row">
<div class="col-md-4">md1</div>
<div class="col-md-4">md2</div>
<div class="col-md-4">md3</div>
</div>
</div>
<div class="col-xs-6 col-md-3 order-xs-6 order-md-6 my-border">
<div class="row">
<div class="col-md-12"><h5>Large</h5></div>
</div>
<div class="row">
<div class="col-md-4">lg1</div>
<div class="col-md-4">lg2</div>
<div class="col-md-4">lg3</div>
</div>
</div>
<div class="col-xs-6 col-md-3 order-xs-1 order-md-9 my-border">
<div class="row">
<div class="col-md-12"><h5>X-Large</h5></div>
</div>
<div class="row">
<div class="col-md-4">xl1</div>
<div class="col-md-4">xl2</div>
<div class="col-md-4">xl3</div>
</div>
</div>
</div>
</div>
<div>I am free</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/popper.js/dist/umd/popper.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
'order-xs-6'은 없습니다. 단지'order-6'입니다. – ZimSystem