3 columns fluid flexbox and rtl

Question

I have 3 fluid columns, in direction ltr, they go left to right which I want, but on direction rtl, they reverse order which I would like to prevent. Is there a way to prevent order reverse without specifying direction: ltr on container element? (because then container children inherit this behavior which I dont want)

#container {
  display: flex; /* displays flex-items (children) inline */
  direction:rtl;/* just for presentation, this would be on html element */
}

#leftcol {
  border: 1px solid #0f0;
}

#centercol {
  flex: 1; /* takes the remaining horizontal space */
  border: 1px solid #000;
}

#rightcol {
  border: 1px solid #0f0;
}

.box {
  width: 50px;
  height: 20px;
  background: red;
  float: left;
}

<div id="container">
  <div id="leftcol">
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
  </div>
  <div id="centercol">
    center
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
</div>

Answer 1

You could just put flex-direction: row-reverse instead of direction: ltr on container element.

#container {
  display: flex; /* displays flex-items (children) inline */
  direction:rtl;/* just for presentation, this would be on html element */
  flex-direction: row-reverse;
}

#leftcol {
  border: 1px solid #0f0;
}

#centercol {
  flex: 1; /* takes the remaining horizontal space */
  border: 1px solid #000;
}

#rightcol {
  border: 1px solid #0f0;
}

.box {
  width: 50px;
  height: 20px;
  background: red;
  float: left;
}

<div id="container">
  <div id="leftcol">
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
  </div>
  <div id="centercol">
    center
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
</div>