Why webpack output local css before boostrap css?

Question

My app uses bootstrap css and local custom css. The problem is webpack's output included some local css before bootstrap css and some come after it, although all my app imported local css after bootstrap. Is there a way to put all custom css after bootstrap css?

[ webpack.config.js ]

config.module.loaders.push({
  ....
  { test: /\.css$/, loader: 'style!css' },
  {
    test: /\.lcss$/,
    loader: ExtractTextPlugin.extract(
      'style',
      'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ),
  }
);

[ component.js ]

import React from 'react';
import { Button, Col, Row } from 'react-bootstrap';
import _ from 'lodash';
import CSSModules from 'react-css-modules';
import styles from './HeroSection.lcss';

class Section extends React.Component {

  render() {
    return (
      <div className="section text-center">
        <Row>
          <Col xs={12} className={styles.caption}>
            Hello, Why !!
          </Col>
          <br />
          <br />
          <Button bsStyle="primary" href="#about">Learn more</Button>
        </Row>
        <img src="/assets/images/baseline.png" alt="baseline" />
      </div>
    );
  }
}
export default CSSModules(Section, styles);

[ section.lcss ]

.caption {
  font-size: 60px;
  color: #fff;
}