Know when flex-box puts item to new row

Question

Is there a way to know when flex-box puts element to new row? I want this to happen as in this snippet (actually jsfiddle is better so you can just resize and see) but without using the

@media screen and (max-width: 830px) {
    /* what ever code in here */
}

cause there might be more or less items <li>s inside the <ul> so I might not even have to put it to new row. Or I do have to put it to new row earlier or later like in this example where the seccond <ul> has only one <li>. So how could I achieve what I'm doing with the CSS media query without the media query? Is there a CSS way? If there is no CSS way, what would be a good javascript solution to add a class to the parent <div> at the right moment?

div {
  display: flex;
}

ul {
    list-style: none;  
    margin: 0 20px 0 0;
    padding: 0;
}

ul li {
    border: solid 1px #afafaf;
    padding: 10px;
    display: inline-block;
}


@media screen and (max-width: 830px) {
    div {
        display: block;
    }
    ul {
        margin: 0;
    }
}

<div>
    <ul>
        <li>Tempor</li>
        <li>accusam</li>
        <li>labore</li>
        <li>sit</li>
        <li>diam</li>
        <li>aliquyam</li>
    </ul>
    <ul>
        <li>Consetetur</li>
        <li>sadipscing</li>
        <li>aliquyam</li>
        <li>voluptua</li>
    </ul>
</div>