freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.spanish.md

id	title	challengeType	videoUrl	localeTitle
587d78ae367417b2b2512aff	Use the order Property to Rearrange Items	0		Utilice la propiedad de orden para reorganizar artículos

Description

La propiedad de order se utiliza para indicar a CSS el orden en que aparecen los elementos flexibles en el contenedor flexible. De forma predeterminada, los elementos aparecerán en el mismo orden en que vienen en el código fuente HTML. La propiedad toma números como valores y se pueden usar números negativos.

Instructions

Agregue el order propiedades CSS a #box-1 y #box-2 . Dé a #box-1 un valor de 2 y a #box-2 un valor de 1.

Tests

tests:
  - text: 'El elemento <code>#box-1</code> debe tener la propiedad de <code>order</code> establecida en un valor de 2.'
    testString: 'assert($("#box-1").css("order") == "2", "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.");'
  - text: 'El elemento <code>#box-2</code> debe tener la propiedad de <code>order</code> establecida en un valor de 1.'
    testString: 'assert($("#box-2").css("order") == "1", "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.");'

Challenge Seed

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;

    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;

    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Solution

// solution required