Order Change

Order Change

Medium CSS Flexbox Layout 20 views
Explanation Complexity

Problem Statement

Swap the visual order of two boxes using order property.

Input Format

No input.

Output Format

Print the HTML+CSS code in one block.

Constraints

Use order on flex items.

Input / Output Format

Input Format
No input.
Output Format
Print the HTML+CSS code in one block.
Constraints
Use order on flex items.

Examples

Input:
Output:
(HTML+CSS code)

Example Solution (Public)

CSS 
<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>meetcode</title>
  <style>
    .row { display: flex; gap: 12px; }
    .a { order: 2; }
    .b { order: 1; }
    .item { padding: 12px; border: 1px solid #eee; border-radius: 12px; }
  </style>
</head>
<body>
  <div class='row'>
    <div class='item a'>Second in DOM</div>
    <div class='item b'>First visually</div>
  </div>
</body>
</html>

Official Solution Code

<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>meetcode</title>
  <style>
    .row { display: flex; gap: 12px; }
    .a { order: 2; }
    .b { order: 1; }
    .item { padding: 12px; border: 1px solid #eee; border-radius: 12px; }
  </style>
</head>
<body>
  <div class='row'>
    <div class='item a'>Second in DOM</div>
    <div class='item b'>First visually</div>
  </div>
</body>
</html>
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.